$normal-col: #53964d
$complete-col: #4080db
$warning-col: #f2a538
$danger-col: #e36262
.normal
  color: $normal-col
  // font-weight: bolder
.complete
  color: $complete-col
  // font-weight: bolder
.warning
  color: $warning-col
  // font-weight: bolder
.danger
  color: $danger-col
  // font-weight: bolder
.esriPopup
  .maximize
    display: none
  .esriPopupWrapper
    .content
      .contentPane
        position: relative
        .marker-name
          margin-bottom: 4px
          font-weight: bolder
          font-size: 14px
        .marker-address
          font-size: 10px
          margin-bottom: 4px
        .marker-hr
          margin: 8px 0
        .area-mesg
          display: inline-block
          width: 75px
          text-align-last: justify
        &.expand
          .expandTarget
            display: block
          .triangle
            .icon-angle-up
        .expandTarget
          display: none
        .triangle
          position: absolute
          bottom: 10px
          right: 10px
          cursor: pointer
          .triangle-item
            display: block
          .toggle-bottom
            position: absolute
            top: 7px
  &.popup-normal
    .esriPopupWrapper
      border: 1px solid $normal-col
      .titlePane
        line-height: 28px
        background: $normal-col
        .title
          text-align: center
        .close
          top: 6px
          right: 6px
      .pointer
        border: 1px solid $normal-col
      .top, .topRight, .topLeft
        background: $normal-col
    .outerPointer 
      border: 1px solid $normal-col
  &.popup-complete
    .esriPopupWrapper
      border: 1px solid $complete-col
      .titlePane
        line-height: 28px
        background: $complete-col
        .title
          text-align: center
        .close
          top: 6px
          right: 6px
      .pointer
        border: 1px solid $complete-col
      .top, .topRight, .topLeft
        background: $complete-col
    .outerPointer 
      border: 1px solid $complete-col
  &.popup-warning
    .esriPopupWrapper
      border: 1px solid $warning-col
      .titlePane
        line-height: 28px
        background: $warning-col
        .title
          text-align: center
        .close
          top: 6px
          right: 6px
      .pointer
        border: 1px solid $warning-col
      .top, .topRight, .topLeft
        background: $warning-col
    .outerPointer 
      border: 1px solid $warning-col
  &.popup-danger
    .esriPopupWrapper
      border: 1px solid $danger-col
      .titlePane
        line-height: 28px
        background: $danger-col
        .title
          text-align: center
        .close
          top: 6px
          right: 6px
      .pointer
        border: 1px solid $danger-col
      .top, .topRight, .topLeft
        background: $danger-col
    .outerPointer 
      border: 1px solid $danger-col
